<template>
	<view class="page">
		<view class="box">
			<view class="header-box"></view>
			<view class="user-box flex">
				<view class="left flex alignC">
					<view class="header_box">
						<image class="header_img"
							:src="ylUserInfo.image ? ylUserInfo.image : '/static/my/header_user.png'" mode=""></image>
						<image v-if="!ylUserInfo.username || !ylUserInfo.volunteerStatus" class="identity_img"
							src="/static/my/identity_3.png" mode=""></image>
						<image v-if="ylUserInfo.username && volunteerType == '1'" class="identity_img"
							src="/static/my/identity_1.png" mode="" @click="toggleIdentity"></image>
						<image v-if="ylUserInfo.username && volunteerType == '2'" class="identity_img"
							src="/static/my/identity_2.png" mode="" @click="toggleIdentity"></image>
					</view>
					<view class="info_box" @click="toPage('/subPackages/userInfo/userInfo?type=userInfo')">
						<view style="font-size: 34rpx;color: #fff;">
							<span v-if="ylUserInfo.nickName">{{ ylUserInfo.nickName }}</span>
							<span v-else-if="ylUserInfo.username">微信用户</span>
							<span v-else @click.stop="toPage('/subPackages/login/login')">点击微信授权</span>
						</view>
						<view style="font-size: 28rpx;color: rgba(255, 255, 255, .5);margin-top: 10rpx;">
							个人信息<u-icon name="arrow-right" color="rgba(255, 255, 255, .5)" size="22"
								style="margin-left: 10rpx;"></u-icon>
						</view>
					</view>
				</view>
				<view class="right setting_box">
					<view class="mes" @click="toPage('/subPackages/message/message')">
						<image src="/static/my/top_icon_1.png" mode=""></image>
						<view class="dot"></view>
					</view>
					<view class="service">
						<button class="kefuBtn" open-type="contact"></button>
						<image src="/static/my/top_icon_2.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="body-box">
<!-- 				<view class="gradient-border flex fcenter" @click="toPage('/subPackages/changerCenter/changerCenter')">
					兑换中心
					<view class="tip themeColor flex fcenter" v-if="ylUserInfo.cloudCoin">{{ ylUserInfo.cloudCoin }}积分</view>
				</view> -->


				<view class="indet flexColumn">
					<view class="allOrder flex alignC" @click="toIndent('')">
						<text
							style="font-size: 30rpx;color: #303133;font-weight: 500;font-family: PingFangSC;">我的订单</text>
						<view style="display: flex;align-items: center;">
							<text style="font-size: 28rpx;color: #999">全部订单</text>
							<u-icon name="arrow-right" color="#D9D9D9" size="28"></u-icon>
						</view>
					</view>
					<view class="flex fjb">
						<view class="indet-item" v-for="(item,index) in indetList" @click="toIndent(item.status)"
							:key="index">
							<uni-badge class="uni-badge-left-margin" :text="item.count" absolute="rightTop"
								:offset="[3, 3]" size="small">
								<image :src="`../../static/my/icon_${index + 1}.png`" mode=""></image>
							</uni-badge>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				<!-- cell -->
				<view class="cell-box" v-if="volunteerType != '1'">
					<view class="my-item" @click="toVolunteer" v-if="!isVolunteer">
						<view style="display: flex;align-items: center;">
							<image class="my-item-image" :src="`/static/my/icon_cell_0.png`"></image>
							<text>成为护工</text>
						</view>
						<u-icon name="arrow-right" color="#303133" size="24"></u-icon>
					</view>
					<view class="my-item" v-for="(item, index) in cellList" @click="toPage(item.url)">
						<view style="display: flex;align-items: center;">
							<image class="my-item-image" :src="`/static/my/icon_cell_${index + 1}.png`"></image>
							<text>{{ item.name }}</text>
						</view>
						<u-icon name="arrow-right" color="#303133" size="24"></u-icon>
					</view>
				</view>
				<view class="cell-box" v-else>
					<view class="my-item" @click="toPage('/subPackages/verifyOrder/verifyOrder')">
						<view style="display: flex;align-items: center;">
							<image class="my-item-image" src="/static/my/icon_cell_9.png"></image>
							<text>核单</text>
						</view>
						<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
					</view>
					<view class="my-item" @click="toPage('/subPackages/porter/porter?volunteerId=1')">
						<view style="display: flex;align-items: center;">
							<image class="my-item-image" src="/static/my/icon_cell_1.png"></image>
							<text>护工信息</text>
						</view>
						<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
					</view>
					<view class="my-item" @click="toPage('/subPackages/doorService/doorService')">
						<view style="display: flex;align-items: center;">
							<image class="my-item-image" src="/static/my/icon_cell_7.png"></image>
							<text>上门服务</text>
						</view>
						<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
					</view>
					<view class="my-item" @click="toPage('/subPackages/healthRecord/workerRecord')">
						<view style="display: flex;align-items: center;">
							<image class="my-item-image" src="/static/my/icon_cell_8.png"></image>
							<text>上传病例</text>
						</view>
						<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
					</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getUserInfoApi,
		getAccessTokenApi,
		getminiCodeApi
	} from '../../common/API/userInfoApi.js'
	import {
		getClassApi
	} from '../../common/API/goodsApi.js'
	import {
		getOrderCountApi
	} from '../../common/API/orderApi.js'
	export default {
		components: {},
		data() {
			return {
				list: ['收藏', '关注', '积分', '优惠券'],
				wh: 0,
				userInfo: {},
				capsule: {},
				indetList: [{
						name: '待支付',
						count: 0,
						status: '0'
					}, {
						name: '待发货',
						count: 0,
						status: '1'
					},
					{
						name: '待收货/使用',
						count: 0,
						status: '2,3,16',
					},
					{
						name: '退款',
						count: 0,
						status: '6,7'
					}
				],
				cellList: [{
						name: '健康档案',
						url: '/subPackages/healthRecord/healthRecord',
					},
					{
						name: '亲情绑定',
						url: '/subPackages/kinship/kinship'
					},
					{
						name: '购物车',
						url: '/subPackages/cart/cart'
					},
					{
						name: '收货地址',
						url: '/subPackages/address/address'
					},
					{
						name: '积分中心',
						url: '/subPackages/pointsCenter/pointsCenter'
					},
					{
						name: '服务协议',
						url: '/subPackages/agreement/agreement'
					}
				],
				CodeUrl: '',
				MyClass: [],
				show: false,
				content: '是否确认退出登录',
				isVolunteer: false,
				volunteerType: '3' // 护工1， 用户2
			};
		},
		computed: {
			...mapState('user', ['ylPhone', 'ylUserId', 'ylUserInfo', 'ylToken', 'ylEnterprise'])
		},
		methods: {
			...mapMutations('user', ['MusetUserId', 'MusetUserInfo', 'MudelToken']),
			// 切换身份
			toggleIdentity() {
				let volunteerType = uni.getStorageSync('volunteerType')
				if (volunteerType == '1') {
					uni.setStorageSync('volunteerType', '2')

				} else {
					uni.setStorageSync('volunteerType', '1')
				}
				this.volunteerType = uni.getStorageSync('volunteerType')
			},
			toVolunteer() {
				if (!uni.getStorageSync('ylToken')) {
					return uni.$showMsg('用户未登录，请先登录')
				} else if (this.ylUserInfo.volunteerStatus == '0') {
					return uni.$showMsg('审核中...')
				} else if (this.ylUserInfo.volunteerStatus == '2') {
					return uni.$showMsg('审核拒绝')
				} else {
					uni.navigateTo({
						url: '/subPackages/porter/porter'
					})
				}
			},
			handleChange(data) {
				const index = data.detail.index
			},
			async getUserInfo(callback) {
				const res = await getUserInfoApi()
				if (res.status === 200) {
					this.MusetUserInfo(res.data)
				} else {
					wx.showToast({
						title: res.message
					})
					wx.hideToast()
				}
				callback && callback()
			},
			toPage(path) {
				wx.navigateTo({
					url: path
				})
			},
			toIndent(status) {
				wx.navigateTo({
					url: `/subPackages/indent/indent?status=${status}`
				})
			},
			async getMyClass(callback) {
				const res = await getClassApi(this.ylEnterprise.enterpriseCode, '2')
				if (res.status === 200) {
					this.MyClass = res.data
				} else {
					uni.$showMsg(res.message)
				}
				callback && callback()
			},
			async getOrderCount() {
				const res = await getOrderCountApi()
				const allCount = Object.values(res.data.allCount)[0]
				const waitPayCount = Object.values(res.data.waitPayCount)[0]
				const waitShippedCount = Object.values(res.data.waitShippedCount)[0]
				const waitReceivedCount = Object.values(res.data.waitReceivedCount)[0]
				const refundPayCount = Object.values(res.data.refundPayCount)[0]
				this.indetList[0].count = waitPayCount
				this.indetList[1].count = waitShippedCount
				this.indetList[2].count = waitReceivedCount
				this.indetList[3].count = refundPayCount
				this.indetList[4].count = allCount
			},
			tosubPackages() {
				uni.navigateTo({
					url: '/subPackages/integral/integral'
				})
			},
			toMember() {
				uni.navigateTo({
					url: '/subPackages/member/member'
				})
			},
			toPages(index) {
				switch (index) {
					case 0:
						break;
					case 1:
						break;
					case 2:
						// uni.navigateTo({
						// 	url: '/subPackages/integral/integral'
						// })
						break;
					case 3:
						break;
				}
			},
			async logout() {
				this.show = true;
			},
			confirm() {
				uni.reLaunch({
					url: '/pages/home/home'
				})
				this.MudelToken()
			},
			toDeclaration() {
				uni.navigateTo({
					url: '/subPackages/declaration/declaration'
				})
			}
		},
		async onShow() {
			if (uni.getStorageSync('ylToken')) {
				this.getOrderCount()
				this.getMyClass()
				this.getUserInfo()
				if (this.ylUserInfo.volunteerStatus == '1') { // 有值就是志愿者，没有就不是(0、申请中；2、审核拒绝)
					console.log('volunteerId', this.ylUserInfo.volunteerId)
					this.isVolunteer = true
					if (uni.getStorageSync('volunteerType')) {
						this.volunteerType = uni.getStorageSync('volunteerType')
					} else {
						this.volunteerType = 1
						uni.setStorageSync('volunteerType', this.volunteerType)
					}

				}
			}


		},
		onLoad() {
			//右上角胶囊高度
			this.capsule = wx.getMenuButtonBoundingClientRect()
		},
		async onPullDownRefresh() {
			await this.getOrderCount()
			await this.getMyClass(uni.stopPullDownRefresh)
		}

	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.gradient-border {
		margin: 0 32rpx;
		height: 87rpx;
		position: relative;
		border-radius: 16rpx 16rpx 0 0;
		background: rgba(255, 255, 255, 0.1);
		color: #fff;
		position: relative;
		font-size: 28rpx;
		.tip{
			position: absolute;
			// width: 123rpx;
			height: 55rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 0rpx;
			top: -35rpx;
			right: -32rpx;
			z-index: 99;
			padding: 0 6rpx;
		}
	}

	.gradient-border::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: 1rpx;
		border-radius: 16rpx 16rpx 0 0;
		background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
		--mask-bg: linear-gradient(#fff, #fff);
		--mask-clip: content-box, padding-box;
		-webkit-mask-image: var(--mask-bg), var(--mask-bg);
		-webkit-mask-clip: var(--mask-clip);
		-webkit-mask-composite: destination-out;
	}

	.cell-box {
		margin-top: 40rpx;

		.my-item {
			height: 108rpx;
		}
	}

	.user-box {
		margin-top: 150rpx;
		position: absolute;
		top: 30rpx;
		width: 100%;

		.left {
			.header_box {
				.header_img {
					width: 128rpx;
					height: 128rpx;
					margin: 0 32rpx;
					border-radius: 50%;
					position: relative;
				}

				.identity_img {
					position: absolute;
					top: -25rpx;
					left: 40rpx;
					width: 110rpx;
					height: 60rpx;
				}
			}

		}

		.right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			image {
				width: 88rpx;
				height: 88rpx;
			}

			.service {
				margin-right: 30rpx;
				position: relative;

				.kefuBtn {
					width: 88rpx;
					height: 88rpx;
					position: absolute;
					opacity: 0;
				}
			}

			.mes {
				position: relative;

				.dot {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					width: 12rpx;
					height: 12rpx;
					background: #FA3534;
					border-radius: 50%;
				}
			}
		}
	}

	.header-box {
		background-image: url('/static/headerBg.jpg');
		background-repeat: no-repeat;
		width: 100%;
		height: 621rpx;
		background-size: 100% 100%;
	}

	.indet {
		display: flex;
		flex-wrap: wrap;
		padding: 32rpx;
		padding-bottom: 0;
		background-color: #fff;
		border-radius: 20rpx;

		.allOrder {
			padding-bottom: 40rpx;
			font-size: 34rpx;
			justify-content: space-between;
		}

		.indet-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 8rpx;

			image {
				width: 64rpx;
				height: 64rpx;
			}

			text {
				color: #000000;
				font-size: 28rpx;
			}
		}
	}

	.body-box {
		border-radius: 20rpx 20rpx 0 0;
		margin: -280rpx 32rpx 32rpx 32rpx;
		// background: #fff;
	}

	/deep/ .uni-grid-item--border-top {
		border: 0;
	}

	.box {
		button {
			margin: 0 30rpx;
		}
	}



	/deep/ .uni-grid {
		border: 0;
	}





	.my-item {
		// padding: 32rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin: 24rpx 0rpx;

		image {
			width: 44rpx;
			height: 44rpx;
			opacity: .8;
		}

		text {
			margin-left: 32rpx;
			font-size: 28rpx;
			color: #000000;
		}
	}

	.worker-tag-v {
		position: absolute;
		top: 6rpx;
		width: 72rpx;
		height: 34rpx;
		background: #FF7B40;
		border-radius: 20rpx 20rpx 20rpx 0rpx;
		border: 1rpx solid #FFFFFF;
		color: #FFFFFF;
		font-size: 24rpx;
		align-items: center;
	}
</style>